<template>
	<view class="flex flex-column">
		<u--input placeholder="请输入标题" border="surround" v-model="title"></u--input>
		<u--textarea v-model="content" height="100" placeholder="请输入正文"></u--textarea>
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="file" multiple
			:maxCount="9"></u-upload>
		<view class="flex flex-row">
			<u-tag :text="city" size="large" icon="map" plain @click="getLocation"></u-tag>
			<!-- 	<u-button type="primary" :plain="true" text="定位" @click="getLocation"></u-button> -->
		</view>
		<view class="margin-top"></view>
		<u-button type="primary" :plain="true" text="发布" @click="publishPost"></u-button>
	</view>
</template>

<script>
	import QQMapWX from "@/pages/utils/qqmap-wx-jssdk.js";
	export default {
		data() {
			return {
				title: '',
				content: '',
				fileList1: [],
				userId: uni.getStorageSync('userId'),
				latitude: null,
				longitude: null,
				qqmapsdk: '',
				key: "I3FBZ-2KILT-FRXXE-VLDLV-DGSQ7-VXFH2",
				city: '',
			};
		},
		onLoad() {
			this.mapInit();

		},
		methods: {
			// 初始化腾讯地图
			mapInit() {
				this.qqmapsdk = new QQMapWX({
					key: this.key
				});
			},

			//获取当前定位
			getLocation() {
				const _this = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						// console.log(res)
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						uni.request({
							url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${_this.latitude},${_this.longitude}&key=${_this.key}&get_poi=1`,
							method: 'GET',
							success: function(rsp) {
								console.log('地理信息', rsp);
								if (rsp.statusCode == 200) {
									//获取城市信息
									// console.log('地理信息', rsp.data.result);
									_this.city = rsp.data.result.ad_info.city;
								}
							}
						});
						uni.showToast({
							title: `定位成功`,
							icon: 'success',
							duration: 2000
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '定位失败',
							icon: 'none',
							duration: 2000
						});
					},
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList1.splice(event.index, 1);
			},
			// 新增图片
			afterRead(event) {
				let lists = [].concat(event.file);
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: "success",
						message: "",
					});
				});
			},
			// 发布帖子
			async publishPost() {
				const imageUrls = [];
				for (let i = 0; i < this.fileList1.length; i++) {
					const result = await this.uploadFilePromise(this.fileList1[i].url);
					imageUrls.push(result);
				}
				// 创建帖子数据
				const postData = {
					userId: this.userId,
					title: this.title,
					content: this.content,
					imageUrls: imageUrls.join(","),
					location:this.city
				};
				// 发送帖子数据到服务器
				this.createPost(postData);
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: `http://localhost:8090/file/user/${this.userId}/posts`,
						filePath: url,
						name: "file",
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data)
									.data);
							}, 0);
						},
						fail: (err) => {
							reject(err);
						},
					});
				});
			},
			// 创建帖子请求
			createPost(postData) {
				uni.request({
					url: 'http://localhost:8090/post/create',
					method: 'POST',
					data: postData,
					header: {
						'Content-Type': 'application/json',
					},
					success: (res) => {
						uni.showToast({
							title: '发布成功',
							icon: 'success',
							duration: 2000
						})
						uni.reLaunch({
							url: '/pages/community/community'
						})
					},
					fail: (err) => {
						console.error('创建帖子失败', err);
					},
				});
			},
		},
	};
</script>